<template>
  <div>
    <div v-text="message"></div>
    <div v-html="htmlContent"></div>
    <input type="text" :placeholder="message" />
    <button @click="clickHandler()">{{ buttonText }}</button>

    <div>
      <input type="text" v-model="userName" placeholder="Enter your name" />
      User Name: {{ userName }}
    </div>
    <div>
      <input type="text" v-model.number="number1" />+<input
        type="text"
        v-model.number="number2"
      />={{ number1 + number2 }}
    </div>
    <div>
      evaluate component test:
      <evaluate :score="95">
        <template #extra>
          <p>Keep up the good work!</p>
        </template>
      </evaluate>
    </div>
    <div>
      <p v-show="showText">这是一段加密数据</p>
      <button @click="toggleShow()">{{ showText ? '隐藏' : '显示' }}</button>
    </div>

    <div>
      <ul>
        <li v-for="(item, index) in testArray" :key="index">{{ index + '-----' + item }}</li>
      </ul>
      <ul>
        <li v-for="obj in objArray" :key="obj.id">{{ obj.id + '-----' + obj.name }}</li>
      </ul>
    </div>

    <div><button @click="changeButton($event)">改变</button></div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import evaluate from '@/components/Evaluate.vue'
const message = 'This is a test view page'
const buttonText = ref('Click Me')
const htmlContent = '<strong style="color: red;">This is red bold text from htmlContent</strong>'
const clickHandler = () => {
  alert('Button clicked!')
}
setTimeout(() => {
  buttonText.value = 'quickly Clicked!'
}, 1000)

const userName = ref('Alice')

const number1 = ref(5)
const number2 = ref(10)

const showText = ref(true)
const toggleShow = () => {
  showText.value = !showText.value
}

const testArray = ref(['Item 1', 'Item 2', 'Item 3'])

const objArray = reactive([
  { id: 1, name: 'name 1' },
  { id: 2, name: 'name 2' },
  { id: 3, name: 'name 3' },
])

const changeButton = (event: Event) => {
  const target = event.target as HTMLButtonElement
  target.textContent = 'Changed!'
}
</script>

<style scoped></style>
